import React from 'react';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import {getcookie} from '../../utils/cookies'
import {setcookie} from '../../utils/cookies'
class Content extends React.Component {

  static defaultProps = {
    className: 'content1',
  };

  render() {
    // console.log("-----content1---this.props",this.props)
    const props = {...this.props};
    // console.log(props);
    const isMode = props.isMode;
    delete props.isMode;
    const animType = {
      one: isMode ? {y: '+=30', opacity: 0, type: 'from'}
        : {x: '-=30', opacity: 0, type: 'from'},
      two: isMode ? {y: '+=30', opacity: 0, type: 'from'}
        : {x: '+=30', opacity: 0, type: 'from'},
    };

    const helpAdvancedData = this.props.fatherProps.indexInfo.groupList[2].courseList

    const helpAdvancedStudy = helpAdvancedData.map(item => {
        return (
          <div className={`${props.className}-queue-child`} onClick={()=>{
            let courseId = item.courseId
            {/*console.log("------courseId------",item.courseId)*/}


            let unionid = getcookie("unionid")
            if (unionid != null && unionid !='' && unionid != undefined) {
              this.props.fatherProps.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,unionid}})
              this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId,unionid}})
            } else {
              window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

            }

          }}>
          <img src={item.courseImgName} width="100%" height="100%"/>

          <div>
            <div>{item.courseName}</div>
            {/*<div>*/}
              {/*<img src={item.avatarUrl} height="50px" width="50px"/>*/}
              {/*<span>罗良奎</span>*/}
            {/*</div>*/}
          </div>

          <div>
            {/*<span>￥ {item.price}</span>*/}
            {/*<span>{item.yCoin} 贝</span>*/}
            <span>{item.salesNum} 正在学习</span>
          </div>

        </div>)
      }


    );


    const itStudy = this.props.fatherProps.indexInfo.groupList[3].courseList.map(item => {
        return (
          <div className={`${props.className}-queue-child`} onClick={()=>{
            let courseId = item.courseId
            let unionid = getcookie("unionid")
            if (unionid != null && unionid !='' ) {

              this.props.fatherProps.dispatch({type:"courseDetail/getcourseBri",payload:{courseId}})
              this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId}})
            } else {
              window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

            }


          }}>
          <img src={item.courseImgName} width="100%" height="100%"/>

          <div>
            <div>{item.courseName}</div>
            {/*<div>*/}
            {/*<img src={item.avatarUrl} height="50px" width="50px"/>*/}
            {/*<span>罗良奎</span>*/}
            {/*</div>*/}
          </div>

          <div>
            {/*<span>￥ {item.price}</span>*/}
            {/*<span>{item.yCoin} 贝</span>*/}
            <span>{item.salesNum} 正在学习</span>
          </div>

        </div>)
      }


    );



    return (
      <div
        {...props}
        className={`content-template-wrapper content-half-wrapper ${props.className}-wrapper`}
      >
        <OverPack
          className={`content-template ${props.className}`}
          location={props.id}
          playScale='0.2'
        >

          <TweenOne
            key="img"
            animation={animType.one}
            className={`${props.className}-queue1`}
            id={`${props.id}-imgWrapper`}
            resetStyleBool
          >
            <div>
              <div>
                <h1 id='title'>
                  {this.props.fatherProps.indexInfo.groupList[2].groupName}
                </h1>
                <p id='divider'>
                  -----------------------
                </p>
              </div>



              <div id='children'>
                {helpAdvancedStudy}
              </div>
            </div>
          </TweenOne>

          <TweenOne
            key="img2"
            animation={animType.two}
            className={`${props.className}-queue2`}
            id={`${props.id}-imgWrapper2`}
            resetStyleBool
          >

            <div>
              <div>
                <h1 id='title'>
                  {this.props.fatherProps.indexInfo.groupList[3].groupName}
                </h1>
                <p id='divider'>
                  -----------------------
                </p>
              </div>

              <div id='children'>
                {itStudy}
              </div>
            </div>
          </TweenOne>
        </OverPack>
      </div>
    );
  }
}

export default Content;
